<template>
    <div id="CarouselList">

        <el-container>

            <!--  页头 -->
            <el-header>
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>轮播图</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>
            <!-- 搜索区 -->
            <el-main  style="background-color: #FFFFFF">
                    <div style="text-indent: 5px;background-color: #F3F3F3">
                        <i class="el-icon-search"></i> 筛选查询
                    </div>
                <div style="background-color: #FFFFFF;">
                        <span style="margin-left: 80px">名称：</span><el-input v-model="name" size="medium " style="width: 180px" placeholder="名称"></el-input>

                        <span style="margin-left: 125px">位置：</span>
                        <el-select clearable size="medium" style="width: 180px" v-model="position" placeholder="全部">
                            <el-option
                                    v-for="item in selectData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                        <span style="margin-left: 125px">状态：</span>
                            <el-select clearable size="medium" style="width: 180px" v-model="display" placeholder="显示/不显示">
                                <el-option
                                        v-for="item in selectOnline"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>

                        <el-button style="margin-left: 105px" @click="Search" size="medium" ><i class="el-icon-search"></i> 查询</el-button>
                </div>
            </el-main>
            <!-- 表格数据区 -->
            <el-footer style="line-height: 60px;text-indent: 5px">
                <i class="el-icon-s-order"></i> 数据列表

                <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column align="center" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="serialNumber" label="编号"></el-table-column>
                    <el-table-column align="center" prop="imgTitle" label="名称"></el-table-column>
                    <el-table-column align="center" prop="position" label="位置">
                        <template slot-scope="scope">
                            <span v-if="scope.row.position == 1">APP首页轮播</span>
                            <span v-if="scope.row.position == 2">PC端首页轮播</span>
                            <span v-if="scope.row.position == 3">PC端分类广告</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgAddress" width="50%">
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="时间">
                        <template slot-scope="scope">
                            <div style="margin-bottom: 10px">开始时间：{{scope.row.startDate}}</div>
                            <div>到期时间：{{scope.row.expireDate}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="display" label="显示/不显示">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.display"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="changeStatus(scope.row)"
                                    :active-value="2"
                                    :inactive-value="3">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="dialogFormVisible = true" @click.native.prevent="editRow(scope.row)" type="text" size="small">
                                编辑
                            </el-button>
                            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-footer>

        </el-container>

        <!--编辑弹出层-->
        <el-dialog title="编辑内容" destroy-on-close :visible.sync="dialogFormVisible">
            <el-form ref="form" style="text-align: center" :model="form" label-width="102px">
                <el-form-item label="名称：">
                    <el-input style="width: 300px" v-model="form.imgTitle"></el-input>
                </el-form-item>
                <br>
                <span style="font-size: 12px;position: relative;top: -18px;left: 66px;color: #9FA7B4">名称只是作为辨别多个条目之用，并不显示在图片中</span>
                <br>
                <el-form-item style="margin-left: -23px" label="位置：">
                    <el-select v-model="form.position">
                        <el-option label="APP首页轮播" value="1">APP首页轮播</el-option>
                        <el-option label="PC端首页轮播" value="2">PC端首页轮播</el-option>
                        <el-option label="PC端分类广告" value="3">PC端分类广告</el-option>
                    </el-select>
                </el-form-item>
                <br>
                <el-form-item style="margin-left: -7px" label="开始时间：">
                    <el-col>
                        <el-date-picker type="date" v-model="form.startDate" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <br>
                <el-form-item style="margin-left: -7px" label="到期时间：">
                    <el-col>
                        <el-date-picker type="date" v-model="form.expireDate" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <br>
                <el-form-item style="margin-left: -110px" label="显示/不显示：">
                    <el-radio-group v-model="form.display">
                        <el-radio :label="2">上线</el-radio>
                        <el-radio :label="3">下线</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br>
                <el-form-item label="图片链接：">
                    <el-input style="width: 300px" v-model="form.imgAddress"></el-input>
                </el-form-item>
                <br>
                <el-form-item style="margin-left: -54px" label="内容备注：">
                    <el-input type="textarea" v-model="form.remarks"></el-input>
                </el-form-item>
                <br>

                <el-button @click="dialogFormVisible = false">取 消</el-button>

                <el-button type="primary" @click="edit()">确 定</el-button>
            </el-form>


        </el-dialog>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
        return{
            tableData:[],//表数据
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 5, // 每页的数据条数
            selectData:[],
            selectOnline:[],
            name:null,
            position:null,
            display:null,
            dialogFormVisible:false,
            form:{//表单
                imgAddress:null,
                imgTitle:null,
                imgType:null,
                startDate:null,
                expireDate:null,
                display:null,
                serialNumber:null,
                carouselId:null,
                describe:null,
                position:null,
                remarks:null
            }
        }
    },
    created() {
        //请求表数据
        this.$http.get("/Carousel/tableData").then(res => {
            this.tableData = res.data
            this.total = res.data.length
        })

        //发放方式下拉框选项
        this.selectData = [
            {
                value: '1',
                label: 'APP首页轮播'
            }, {
                value: '2',
                label: 'PC端首页轮播'
            }, {
                value: '3',
                label: 'PC端分类广告'
            }
        ]
        this.selectOnline = [
            {
                value: '2',
                label: '显示'
            }, {
                value: '3',
                label: '不显示'
            }
        ]
    },
    methods: {
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //状态改变时执行的函数
        changeStatus(row){
            let ol = row.display;
            let cid = row.carouselId;

            this.$http.get("/Carousel/modifyDisplay",{params:{modify:ol,id:cid}}).then(res => {
                if (res.data.status == 200) {
                    this.$message(res.data.msg);
                }else{
                    this.$message(res.data.msg);
                    if (e == 2){
                        setTimeout(()=>{
                            row.display = 3
                        },1000)

                    } else if(e == 3) {
                        setTimeout(()=>{
                            row.display = 2
                        },500)
                    }
                }
            })
        },
        //条件查询
        Search(){
            this.currentPage = 1;
            this.$http.get("/Carousel/tableData",{params:{name:this.name,position:this.position,display:this.display}}).then(res => {
                this.tableData = res.data
                this.total = res.data.length
            })
        },
        //编辑按钮
        editRow(row){
            this.form.carouselId = row.carouselId
            this.form.imgTitle = row.imgTitle
            if(row.position == 1){
                this.form.position = "APP首页轮播"
            }else if(row.position == 2){
                this.form.position = "PC端首页轮播"
            }else if(row.position == 3){
                this.form.position = "PC端分类广告"
            }
            this.form.imgAddress = row.imgAddress
            this.form.imgType = row.imgType
            this.form.startDate = row.startDate
            this.form.expireDate = row.expireDate
            this.form.display = row.display
            this.form.remarks = row.remarks
            this.form.serialNumber = row.serialNumber
            this.form.describe = row.describe
        },
        //修改
        edit(){
            if (this.form.position != 1 || this.form.position != 2 || this.form.position != 3){
                this.form.position = 0;
            }
            this.$http.get("/Carousel/edit",{params:this.form}).then(res => {
                if (res.data.status == 200) {
                    this.$message(res.data.msg);
                    this.reload()
                }else{
                    this.$message(res.data.msg);
                    this.reload()
                }
            })
        },
        //删除
        deleteRow(row){
            let url = "/Carousel/delete";
            var data = new URLSearchParams()
            data.append('id', row.carouselId);
            this.$http.post(url, data, {
                headers: {
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res => {
                let status = res.data.status;
                if (status == 200) {
                    this.$message(res.data.msg);
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].carouselId == row.carouselId) {
                            this.tableData.splice(i,1)
                        }
                    }
                }else {
                    this.$message(res.data.msg);
                }
            })
        }
    }
}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 130px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
     }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
